<template>
	<view class="container" :style="isOther?'padding-bottom: 150rpx;':'padding-bottom: 30rpx;'">
		<view class="content">
			<view class="part1">
				<view class="u-flex u-row-between">
					<text class="page-title" style="margin-bottom: 30rpx;">简介</text>
					<u-icon v-if="useState.isMyFriend && !useState.inMyList && isOther" name="more-dot-fill" size="26" @click="showMask = true"></u-icon>
				</view>
				<view class="swiper-box">
					<!-- @change="changeSwiper" -->
					<swiper class="swiper-item" style="height: 400rpx;"
						:circular="true" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="2500">
						<swiper-item
							@click="previewImg(swipList,index,'picPath','https://www.ydylmold.cn/images/ydylapp/usrMainPic/usrCraftsmanImage/')"
							v-for="(item,index) in swipList" :key="index">
							<image class="swiper-img" :src="'https://www.ydylmold.cn/images/ydylapp/usrMainPic/usrCraftsmanImage/' +
									item.picPath" style="width: 100%;height: 100%;"></image>
						</swiper-item>
					</swiper>
				</view>
				<text
					:style="!showMore?'width: 100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;':''"
					class="span-text">{{useData.remarks || '用户还没有简介哦'}}</text>
				<text class="see-more" v-if="useData.remarks && useData.remarks.length>90"
					@click="showMore = !showMore">{{!showMore?'查看更多':'点击收起'}}</text>
			</view>
			<!-- 名片数据 -->
		<!-- 	<my-data radius="10rpx"></my-data> -->
			<!-- 名片 -->
			<view class="part3">
				<view class="card-box" v-if="isHead">
					<view class="ctop-box">
						<view class="ctop-info">
							<text class="ctop-info-text1">{{useData.realName || useData.usrName}}<text
									class="ctop-info-text2">{{useData.posts}}</text></text>
						</view>
						<text class="tip-comp" v-if="acComp">{{acComp}}</text>
					</view>
					<view class="c-bom">
						<view class="c-bom-item" v-if="useData.contactNumber">
							<text class="c-bom-text1">电 话： </text>
							<text class="c-bom-text2"
								@click="callPeo()">{{useData.contactNumber}}</text>
						</view>
						<view class="bor" v-if="useData.contactNumber"></view>
						<view class="c-bom-item" v-if="useData.email">
							<text class="c-bom-text1">邮 箱： </text>
							<text class="c-bom-text2">{{useData.email}}</text>
						</view>
						<view class="bor" v-if="useData.email"></view>
						<view class="c-bom-item" v-if="useData.address">
							<text class="c-bom-text1">城 市： </text>
							<text class="c-bom-text2">{{useData.address}}</text>
						</view>
						<view class="bor" v-if="useData.address"></view>
						<view class="c-bom-item" v-if="useData.moreAddr" @click="showMap">
							<text class="c-bom-text1">地 址： </text>
							<text class="c-bom-text2">{{useData.moreAddr}}</text>
						</view>
						<view class="bor" v-if="useData.moreAddr"></view>
					</view>
					<view class="logo-box">
						<u-image class="logo-img" width="76rpx" height="76rpx" radius="50%" :lazyLoad="true"
							@click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg])"
							:src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/'+useData.headImg"
							mode=""></u-image>
					</view>
					<view class="logo-box2">
						<u-image class="logo-img" width="120rpx" height="120rpx" :lazyLoad="true"
							@click="previewImg(['https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode])"
							:src="'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/craftsmanHomepageCode/'+useData.homepageCode"
							style="width: 140rpx;height: 140rpx;"></u-image>
					</view>
				</view>
				<view class="card-box" style="padding: 40rpx 0 0 0;" v-else>
					<view class="ctop-box">
						<view style="font-size: 36rpx;font-weight: bold;text-align: center;">业务范围</view>
					</view>
					<view class="c-bom"
						style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<view v-if="useData.businessScope" class="c-bom-item"
							v-for="(item,index) in useData.businessScopeList" :key="index"
							style="line-height: 60rpx;display: flex;flex-direction: column;align-items: flex-start;">
							<view class="c-bom-text2" style="font-size: 30rpx;font-weight: bold;" v-if="item"><text
									style="margin-right: 10rpx;">※</text> {{item }}</view>
						</view>
						<view v-else class="c-bom-item"
							style="line-height: 60rpx;display: flex;flex-direction: column;align-items: flex-start;">
							<view class="c-bom-text2" style="font-size: 30rpx;font-weight: bold;">暂未填写</view>
						</view>
					</view>
				</view>
				<view class="btn-box2 u-flex u-row-around">
					<text class="btn-box-text2" @click="isHead = !isHead"
						style="color: #FFFFFF;background-color: #009CFF;">翻转名片</text>
					<text class="btn-box-text2" @click="posterClick">名片海报</text>
				</view>
			</view>
			<!-- 我的企业 -->
			<view class="part4" v-if="acCompList && acCompList.length">
				<view class="com-box">
					<text class="page-title" style="margin-bottom: 0rpx;display: block;">我的企业</text>
					<view class="part4-con" @click="$store.commit('toUserIndex',item)"
						v-for="(item,index) in acCompList" :key="index">
						<u-image class="logo-img" width="180rpx" height="180rpx" :lazyLoad="true"
							:src="'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/'+item.companyLogo"
							mode="aspectFill"></u-image>
						<view class="part4-info">
							<text class="info-title">{{item.companyNameCn}}</text>
							<text class="info-con">{{item.mainBusiness || item.remarks}}</text>
						</view>
						<image class="jiantou" src="https://job.ydylmold.cn/mingpian/image/comIndex/jiantou.png"
							mode=""></image>
					</view>
				</view>
			</view>
			<!-- 推荐文章 -->
			<view class="part5">
				<view class="part5-top">
					<text class="page-title" style="line-height: 110rpx;">推荐文章</text>
					<view class="u-flex" @click="toMoreNews" style="font-size: 28rpx;color: #666666;">
						<text>更多</text>
						<image style="width: 12rpx;margin-left: 12rpx;"
							src="https://job.ydylmold.cn/mingpian/image/comIndex/jiantou.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="part5-list">
					<view class="part5-item" @click="newClick(item)" v-for="(item,index) in newsList" :key="index">
						<image class="part5-img" width="200rpx" height="120rpx" radius="10rpx" :lazyLoad="true"
							:src="'https://www.ydylmold.cn/images/ydyladmin/portalNews/coverImage/'+(item.imgTitle && item.imgTitle.split(',') && item.imgTitle.split(',')[0])"
							mode="aspectFill"></image>
						<view class="part5-info">
							<text class="info-title">{{item.title}}</text>
							<view class="bom-box">
								<text class="bom-text2">
									{{timeDifference($u.timeFormat(new Date(item.createDate || Date.now()),'yyyy-mm-dd hh:MM:ss'))}}
									<!-- {{$u.timeFormat(new Date(item.createDate || Date.now()), 'yyyy-mm-dd hh:MM')}} -->
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<my-button :useNum="craftsmanId" :acPhone="useData.contactNumber" :isShare="isShare" :isOther="isOther"></my-button>
		<u-action-sheet @select="selectItem" @close="showMask = false" :actions="stateList" :title="title" :show="showMask">
		</u-action-sheet>
		<my-auth-modal></my-auth-modal>
	</view>
	</view>
</template>
<script>
	import {
		timeDifference
	} from '@/utils/formaterTime.js'
	import {
		queryEnterpriseContact,
		queryPicList,
		queryNewForSlef
	} from '@/common/api/auth.js'
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	import {
		callPeople
	} from '@/utils/common.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		props:['useId','isShare','hasLeft','isOther'],
		data() {
			return {
				autoplay: true,
				showMore: false,
				newsList: [], //公司新闻
				swipList: [], //轮播图
				useData: {}, //个人信息
				compData: {}, //企业信息
				acComp: '',
				acCompList: [],
				craftsmanId: '',
				title: '更多操作',
				showMask: false,
				version: getToken('version'),
				isEmpty: true,
				isHead: true,
				windowUrl: getToken('windowUrl')
			}
		},
		computed: {
			...mapGetters(['useState', 'isFresh','stateList']),
		},
		created: function() {
			if (this.useId) {
				this.craftsmanId = this.useId
			}else{
				this.craftsmanId = getToken('useNum')
			}
			this.init()
		},
	
		// 触发下拉刷新
		onPullDownRefresh() {
			this.init()
			// 延迟关闭刷新动画
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			timeDifference,
			posterClick() {
				if (getToken('isLogin')) {
					this.toUrl(`/pages/indexSub/cardPoster/cardPoster?acComp=${this.acComp}&useId=${this.craftsmanId}`)
				}
			},
			newClick(item) {
				if (getToken('isLogin')) {
					if(item.from=='portal'){
						this.toUrl(`/pages/newsPart/index/newsDetail?newsId=${item.id}`)
					}
					else{
						this.toUrl(`/pages/indexSub/newDetail?id=${item.id}`)
					}
				}
			},
			toMoreNews() {
				if (getToken('isLogin')) {
					uni.navigateTo({
						url: '/pages/newsPart/index/index'
					})
				}
			},
			selectItem(e) {
				switch (e.name) {
					case '加入黑名单':
						this.$store.dispatch('usrBlackListInsert', this.craftsmanId)
						break
					case '删除好友':
						this.$store.dispatch('delFriends', this.craftsmanId)
						break
				}
			},
			previewImg(arr, index, key, head) {
				if (key) {
					arr = arr.map(v => {
						return head ? (head + v[key]) : v[key]
					})
				}
				uni.previewImage({
					current: index || 0,
					urls: arr
				})
			},
			showMap() {
				// #ifdef H5
				uni.navigateTo({
					url: `/pages/comment/webView?url=http://apis.map.qq.com/uri/v1/marker/?marker=coord:${this.useData.lat},${this.useData.lng};title:${this.useData.moreAddr};addr:${this.useData.moreAddr}&referer=myapp&key=UXABZ-A5WHW-M4SRW-OOBAI-A42YS-2DFJM`
				})
				// #endif
			},
			callPeo() {
				callPeople(this.craftsmanId, this.useData.contactNumber,this.isShare)
			},
			// 初始化数据
			init() {
				this.acCompList = []
				//获取企业轮播图、轮播图数量、企业认证状态、企业更多资料
				Promise.all([
					this.queryPicList(),
					this.queryCraftsmanById(),
					this.queryNewForSlef(),
					this.queryEnterpriseContact()
				]).then(([
					res1, res2, res3, res4 = []
				]) => {
					if (res1.statusCode == 200) {
						this.swipList = res1.data
					}
					if (res2.craftsmanId) {
						this.useData = res2
						if (this.useData && this.useData.businessScope) {
							this.useData.businessScopeList = this.useData.businessScope.split(' ')
						}
						uni.setNavigationBarTitle({
							title: this.useData.realName
						})
					}
					if (res3.data && res3.data.code == 1) {
						this.newsList = res3.data.data
					}
					if (res4.statusCode == 200) {
						this.compData = res4.data
						this.compData && this.compData.usrCompanyList && this.compData.usrCompanyList.forEach(
						m => {
							if (m.companyId == this.useData.companyNo) {
								this.acComp = m.companyNameCn
								this.acCompList = [m]
							}
						})
					}
				})
			},
			queryNewForSlef() {
				return queryNewForSlef({
					craftsmanId: getToken('useNum')
				})
			},
			//公司信息
			queryEnterpriseContact() {
				return queryEnterpriseContact({
					userId: getToken('useNum'),
					craftsmanId: getToken('useNum')
				})
			},
			//查找轮播图
			queryPicList() {
				if(this.craftsmanId)
				return queryPicList({
					craftsmanId: this.craftsmanId,
					moduleNo: 'ydylAppUsr001',
					state: 1,
					owner: this.craftsmanId
				})
			},
			queryCraftsmanById() {
				return this.$store.dispatch('queryCraftsmanById', {userId:this.craftsmanId,isShare:this.isShare})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		width: 750rpx;
		background-color: #F7F9FF;
		position: relative;
	}

	.page-title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 88rpx;
	}

	// 头部
	.nav-left-text {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.con-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		text-align: center;
	}

	// 头部
	.cen-img {
		width: 60rpx;
		height: 60rpx;
		background: #000000;
		border-radius: 50%;
	}

	.cen-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 18rpx;
		text-align: center;
		width: 180rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.more-img {
		width: 42rpx;
		height: 32rpx;
		margin-left: 50rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 32rpx;
	}

	// 简介
	.part1 {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 7rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 15rpx;
		padding: 30rpx 32rpx 40rpx 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.span-text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			display: block;
			margin: 30rpx 0;
		}

		.see-more {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #969799;
			text-align: center;
			display: block;
		}

		// 轮播图
		.swiper-box {
			position: relative;
			width: 100%;
			height: 400rpx;
			
			.swiper-img {
				width: 750rpx;
				height: 400rpx;
			}

			.jian-left,
			.jian-right {
				width: 50rpx;
				height: 120rpx;
				z-index: 99;
				top: 140rpx;
				position: absolute;
			}

			.jian-left {
				left: 0;
			}

			.jian-right {
				right: 0;
			}
		}
	}

	//功能按钮
	.part2 {
		display: flex;
		align-items: center;
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 7rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin-top: 40rpx;

		.part2-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.part2-item-img {
			width: 48rpx;
			height: 48rpx;
		}

		.part2-item-text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 60rpx;
		}
	}

	//名片
	.part3 {
		width: 100%;
		margin-top: 40rpx;
		position: relative;

		.card-box {
			width: 686rpx;
			min-height: 423rpx;
			background-image: url('https://job.ydylmold.cn/mingpian/image/comIndex/mingpian.png');
			background-size: cover;
			padding: 40rpx 0 0 128rpx;
			box-sizing: border-box;
			margin-bottom: 40rpx;
			position: relative;
			border-radius: 10rpx;
		}

		.ctop-info {
			display: flex;
			font-size: 41rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #1166B1;
			align-items: flex-end;
			line-height: 41rpx;
		}

		.ctop-info-text2 {
			font-size: 23rpx;
			margin-left: 16rpx;
			line-height: 23rpx;
		}

		.logo-box,
		.logo-box2 {
			position: absolute;
		}

		.logo-box2 {
			/* #ifdef MP-WEIXIN */
			bottom: 47rpx;
			right: 42rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			bottom: 0rpx;
			right: 0rpx;
			/* #endif */
		}

		.logo-box {
			top: 47rpx;
			right: 42rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.logo-text {
			font-size: 15rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #1166B1;
			line-height: 40rpx;
		}

		.code-img {
			right: 30rpx;
			bottom: 44rpx;
		}

		.tip-comp {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #343535;
			line-height: 49rpx;
			border-bottom: 3rpx solid #1265B0;
			margin: 30rpx 0;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			width: 360rpx;
			display: block;
		}

		.c-bom {
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
		}

		.bor {
			width: 380rpx;
			height: 1rpx;
			background: #A8A8A8;
			margin-bottom: 20rpx;
		}

		.c-bom-item {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 800;
			color: #343535;
			width: 400rpx;
		}

		.c-bom-text2 {
			flex: 1;
		}

		.c-bom-text1 {
			color: #1265B0;
			display: block;
			white-space: nowrap;
		}

		.logo-img {
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
		}

		.code-img {
			width: 76rpx;
			height: 76rpx;
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-box-text1,
		.btn-box-text2 {
			margin: 0 10rpx;
			flex: 1;
			padding: 14rpx 0;
			text-align: center;
			display: block;
			background: #009CFF;
			border-radius: 10rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			box-sizing: border-box;
		}

		.btn-box-text2 {
			border: 2px solid #009CFF;
			color: #009CFF;
			background-color: #F7F9FF;
		}
	}

	.part4 {
		width: 100%;
		margin-top: 40rpx;
		// height: 332rpx;
		padding: 20rpx 32rpx 30rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 7rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;

		.logo-img {
			width: 180rpx;
			height: 180rpx;
		}

		.part4-con {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.com-box {
			width: 100%;
			// height: 332rpx;
		}

		.part4-info {
			margin-left: 37rpx;
			display: flex;
			flex-direction: column;
			height: 200rpx;
			width: 400rpx;
		}

		.info-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			width: 100%;
			margin-bottom: 24rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.info-con {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666;
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			width: 326rpx;
		}

		.jiantou {
			width: 20rpx;
			height: 36rpx;
		}
	}

	// 推荐文章
	.part5 {
		width: 100%;
		margin-top: 40rpx;
		background: #FFFFFF;
		box-shadow: 7rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		padding: 0 34rpx;
		box-sizing: border-box;

		.part5-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.top-info {
			display: flex;
			align-items: center;
		}

		.tinfo-img {
			width: 12rpx;
			height: 21rpx;
		}

		.tinfo-more {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 12rpx;
			line-height: 130rpx;
		}

		.part5-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			border-bottom: solid 1px #9c9c9c;
			padding-bottom: 24rpx;
		}

		.part5-img {
			width: 200rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}

		.part5-info {
			flex: 1;
			margin-left: 50rpx;
			min-height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.info-title {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			width: 383rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.bom-text1,
		.bom-text2 {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.bom-text1 {
			margin-left: 10rpx;
		}
	}

</style>
